<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search()">
			<el-form-item label="关键词" prop="keyword">
				<el-input v-model="state.keyword" placeholder="请输入" clearable>
					<template #prepend>
						<el-select v-model="state.keyType" placeholder="请选择" style="width: 100px; min-width: 100px">
							<el-option label="项目名称" value="1" />
							<el-option label="项目编号" value="2" />
							<el-option label="负责人" value="3" />
							<el-option label="联系人" value="4" />
							<el-option label="承担单位" value="5" />
						</el-select>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="申报年份" prop="yearrange">
				<el-date-picker
					v-model="state.yearrange"
					type="yearrange"
					format="YYYY"
					value-format="YYYY"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="申报状态" prop="processStatus">
				<el-select v-model="state.queryForm.processStatus" placeholder="请选择" style="width: 100%" clearable>
					<el-option v-for="item in processStatuslist" :key="item.code" :label="item.name" :value="item.code"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="过程阶段" prop="processStage">
				<el-select v-model="state.queryForm.processStage" placeholder="请选择" style="width: 100%" clearable>
					<el-option v-for="item in processStage" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="进度状态" prop="scheduleStatus">
				<el-select v-model="state.queryForm.scheduleStatus" placeholder="请选择" style="width: 100%" clearable>
					<el-option v-for="item in scheduleStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="项目负责人" prop="projectManager">
				<el-select v-model="state.queryForm.projectManager" filterable clearable>
					<el-option v-for="item in userDatalist" :key="item.id" :label="item.cnName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="search()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<el-form :inline="true" style="text-align: right" class="anniu">
			<el-form-item v-auth="'M005_AssignAdmin'">
				<el-button type="primary" @click="setUser">分配/更换账号</el-button>
			</el-form-item>
			<el-form-item v-auth="'M005_2_TimeSetting'">
				<el-button type="primary" @click="setTime">时间设置</el-button>
			</el-form-item>
			<el-form-item v-auth="'M005_2_LagAnalysis'">
				<el-button type="primary" @click="showZhiHouDialog = true">滞后分析</el-button>
			</el-form-item>
			<el-form-item v-auth="'M005_2_ViewApprovalFile '">
				<el-button type="primary" @click="showPiWenDialog = true">立项批文查看</el-button>
			</el-form-item>
			<el-form-item v-auth="'M005_2_Export'">
				<el-button type="primary" @click="exportHandle()">导出全部</el-button>
			</el-form-item>
		</el-form>
		<el-table ref="multipleTableRef" v-loading="state.dataListLoading" :data="dataList" stripe :row-class-name="tableRowClassName" border>
			<el-table-column type="selection" header-align="center" align="center" width="55" fixed="left" />
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60" resizable sortable></el-table-column>
			<el-table-column prop="projectNumber" label="项目编号" header-align="center" align="center" width="120" resizable sortable></el-table-column>
			<el-table-column prop="researchName" label="项目名称" header-align="center" align="center" width="200" resizable sortable></el-table-column>
			<!-- <el-table-column prop="contacts" label="联系人" header-align="center" align="center" width="120"></el-table-column> -->
			<!-- <el-table-column prop="contactsTel" label="联系人电话(手机)" header-align="center" align="center" width="120"></el-table-column> -->
			<el-table-column prop="principal" label="负责人" header-align="center" align="center" width="120" resizable sortable></el-table-column>
			<el-table-column prop="principalTel" label="负责人电话" header-align="center" align="center" width="120" resizable sortable />
			<el-table-column prop="responsibleEnt" label="承担单位" header-align="center" align="center" width="120" resizable sortable />
			<el-table-column prop="projectFunding" label="课题总经费(万元)" header-align="center" align="center" width="150" resizable sortable />
			<el-table-column prop="applyYear" label="申报年份" header-align="center" align="center" resizable sortable width="120" />
			<el-table-column prop="projectManager" label="项目管理员" header-align="center" align="center" width="160" resizable sortable />
			<el-table-column prop="processStage" label="过程阶段" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<span>{{ processStage.filter(item => item.value == scope.row.processStage)[0].label }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="processStatus" label="申报状态" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<span>{{ processStatuslist.filter(item => item.code == scope.row.processStatus)[0].name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="actualOpeningDate" label="实际开题时间" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<span v-if="scope.row.actualOpeningDate">{{ scope.row.actualOpeningDate.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="actualMidtermDate" label="实际中期时间" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<span v-if="scope.row.actualMidtermDate">{{ scope.row.actualMidtermDate.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="actualCompletionDate" label="实际结题时间" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<span v-if="scope.row.actualMidtermDate">{{ scope.row.actualMidtermDate.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="已归档" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<el-icon v-if="scope.row.processStage == '7'" color="#1491FF" size="26"><SuccessFilled /></el-icon>
				</template>
			</el-table-column>
			<el-table-column label="成果发布" header-align="center" align="center" width="120" resizable sortable>
				<template #default="scope">
					<el-icon
						v-if="scope.row.achievementReleaseStatus == '0'"
						color="#1491FF"
						size="26"
						style="cursor: pointer"
						@click="handleViewResult(scope.row)"
						><SuccessFilled
					/></el-icon>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="130">
				<template #default="scope">
					<el-icon
						v-if="Number(scope.row.processStage) < 6"
						:size="16"
						color="#1491FF"
						title="编辑"
						style="cursor: pointer; margin: 0 6px"
						@click="handleEdit(scope.row)"
					>
						<Edit />
					</el-icon>
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="handleView(scope.row)">
						<View />
					</el-icon>
					<el-icon
						v-if="Number(scope.row.processStage) < 6 && Number(scope.row.processStage) > 3"
						v-auth="'M005_2_Return'"
						:size="16"
						color="#1491FF"
						title="退回修改"
						style="cursor: pointer; margin: 0 6px"
						@click="handleReturnBack(scope.row)"
					>
						<FolderDelete />
					</el-icon>
					<el-icon
						v-if="scope.row.processStage == '6' && scope.row.processStatus == '2'"
						v-auth="'M005_2_FileApproval'"
						:size="16"
						color="#1491FF"
						title="归档审核"
						style="cursor: pointer; margin: 0 6px"
						@click="handleFile(scope.row)"
					>
						<FolderOpened />
					</el-icon>
					<el-icon
						v-if="scope.row.achievementReleaseStatus == '0'"
						:size="16"
						color="#1491FF"
						title="取消发布成果"
						style="cursor: pointer; margin: 0 6px"
						@click="handleCancleRelease(scope.row)"
						><CircleClose
					/></el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
	<addDialog v-model="showAddDialog" :edit-id="editId" :is-view="isView" :is-audit="true" @submit-success="addSuccess"> </addDialog>
	<fileDialog v-model="showFileDialog" :edit-id="editId" :is-view="isView" :is-audit="true" @submit-success="addSuccess1"> </fileDialog>
	<cmDialog v-model="showSetUser" modal-title="分配账号" width="600px">
		<el-table :data="selectList">
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column prop="researchName" label="项目名称" align="center"> </el-table-column>
			<el-table-column prop="projectManagerNameA" label="管理员A" align="center"> </el-table-column>
			<el-table-column prop="projectManagerNameB" label="管理员B" align="center"> </el-table-column>
		</el-table>
		<el-form ref="userFormRef" :model="userForm" :rules="userRules" style="margin-top: 20px">
			<el-form-item label="管理账号A 分配为：" prop="projectManagerA">
				<el-select v-model="userForm.projectManagerA" filterable clearable>
					<el-option v-for="item in userDatalist" :key="item.id" :label="item.cnName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="管理账号B 分配为：" prop="projectManagerB">
				<el-select v-model="userForm.projectManagerB" filterable clearable>
					<el-option v-for="item in userDatalist" :key="item.id" :label="item.cnName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div class="dialog-foot" style="padding-bottom: 12px">
			<el-button @click="showSetUser = false">取消</el-button>
			<el-button type="primary" @click="submitSetUserForm(userFormRef)">确认</el-button>
		</div>
	</cmDialog>
	<cmDialog v-model="showSetTime" modal-title="时间设置" width="600px">
		<el-form ref="timeFormRef" :model="timeForm" :rules="timeRules" style="margin-top: 20px">
			<el-form-item label="开题截止日期" prop="openingDeadline">
				<el-date-picker
					v-model="timeForm.openingDeadline"
					type="date"
					placeholder="请选择日期"
					style="width: 100%"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					:default-time="defaultTime"
				/>
			</el-form-item>
			<el-form-item label="中期截止日期" prop="midtermDeadline">
				<el-date-picker
					v-model="timeForm.midtermDeadline"
					type="date"
					placeholder="请选择日期"
					style="width: 100%"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					:default-time="defaultTime"
				/>
			</el-form-item>
			<el-form-item label="结题截止日期" prop="completionDeadline">
				<el-date-picker
					v-model="timeForm.completionDeadline"
					type="date"
					placeholder="请选择日期"
					style="width: 100%"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					:default-time="defaultTime"
				/>
			</el-form-item>
		</el-form>
		<div class="dialog-foot" style="padding-bottom: 12px">
			<el-button @click="showSetTime = false">取消</el-button>
			<el-button type="primary" @click="submitSetTimeForm(timeFormRef)">确认</el-button>
		</div>
	</cmDialog>
	<piwenDialog v-model="showPiWenDialog"> </piwenDialog>
	<zhihouDialog v-model="showZhiHouDialog"> </zhihouDialog>
</template>
<script setup lang="ts">
import { assignAccountApi, getList, returnBack, updateTimeSetting } from '@/api/Prospect-project/process-declare'
import { queryUserApi } from '@/api/system/rbac'
import cmDialog from '@/components/cm-dialog/index.vue'
import { useDictionaryStore } from '@/store/modules/dictionary'
import { useUserStore } from '@/store/modules/user'
import axios from 'axios'
import type { FormInstance, TableInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import addDialog from '../components/addDialog.vue'
import fileDialog from '../components/fileDialog.vue'
import piwenDialog from '../components/piwenDialog.vue'
import zhihouDialog from '../components/zhihouDialog.vue'

const route = useRoute()
const pendingStatus = route.query.pendingStatus

const dictionaryStore = useDictionaryStore()
const userStore = useUserStore()

const processStage = [
	{
		label: '开题',
		value: '3'
	},
	{
		label: '中期',
		value: '4'
	},
	{
		label: '结题',
		value: '5'
	},
	{
		label: '等待归档',
		value: '6'
	},
	{
		label: '已归档',
		value: '7'
	}
]
const scheduleStatus = [
	{
		label: '正常',
		value: '1'
	},
	{
		label: '滞后',
		value: '2'
	}
]
const processStatus = [
	{
		label: '未提交',
		value: '0'
	},
	{
		label: '未处理',
		value: '1'
	},
	{
		label: '已处理',
		value: '2'
	}
]
const processStatuslist = dictionaryStore.getDictionaryByCode('T004')

const state = reactive({
	queryForm: {
		researchName: '',
		projectNumber: '',
		principal: '',
		contacts: '',
		processStage: '',
		projectManager: '',
		scheduleStatus: '',
		processStatus: '',
		approvalReview: '',
		startYear: '',
		endYear: '',
		responsibleEnt: '',
		pendingStatus: pendingStatus || ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false,
	keyType: '',
	keyword: null,
	yearrange: []
})
const multipleTableRef = ref<TableInstance>()
const dataList = ref([])
const showAddDialog = ref<boolean>(false)
const editId = ref<string>('')
const isView = ref<boolean>(false)
const isAudit = ref<boolean>(false)

const showFileDialog = ref<boolean>(false)

const userDatalist = ref([])
const showSetUser = ref<boolean>(false)
// const isChangeUser = ref<boolean>(false)
const selectList = ref([])
const userFormRef = ref<FormInstance>()
const userForm = reactive({
	ids: [],
	projectManagerA: '',
	projectManagerB: ''
})
const userRules = reactive<any>({
	projectManagerA: [{ required: true, message: '请选择', trigger: 'change' }],
	projectManagerB: [{ required: true, message: '请选择', trigger: 'change' }]
})

const showSetTime = ref<boolean>(false)
const timeFormRef = ref<FormInstance>()
const timeForm = reactive({
	ids: [],
	openingDeadline: '',
	midtermDeadline: '',
	completionDeadline: ''
})
const timeRules = reactive<any>({
	openingDeadline: [{ required: true, message: '请选择日期', trigger: 'change' }],
	midtermDeadline: [{ required: true, message: '请选择日期', trigger: 'change' }],
	completionDeadline: [{ required: true, message: '请选择日期', trigger: 'change' }]
})
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const showPiWenDialog = ref<boolean>(false)
const showZhiHouDialog = ref<boolean>(false)

watch(
	() => showAddDialog.value,
	newVal => {
		if (newVal == false) {
			editId.value = ''
			isView.value = false
			isAudit.value = false
		}
	}
)

watch(
	() => showFileDialog.value,
	newVal => {
		if (newVal == false) {
			editId.value = ''
			isView.value = false
			isAudit.value = false
		}
	}
)

watch(
	() => showSetUser.value,
	newVal => {
		if (newVal == false) {
			userForm.ids = []
			userForm.projectManagerA = ''
			userForm.projectManagerB = ''
			selectList.value = []
			// isChangeUser.value = false
		}
	}
)

const tableRowClassName = ({ row }: { row: any }) => {
	if (row.progressColor) {
		return row.progressColor
	}
}

const getUserList = () => {
	queryUserApi({
		cnName: '',
		loginName: '',
		pageIndex: 1,
		pageSize: 1000,
		roleCode: 'ZZADMIN,SHZZ'
	}).then(res => {
		userDatalist.value = res.data.list
	})
}

const getDataList = () => {
	state.queryForm.researchName = ''
	state.queryForm.projectNumber = ''
	state.queryForm.principal = ''
	state.queryForm.contacts = ''
	state.queryForm.responsibleEnt = ''
	state.queryForm.startYear = ''
	state.queryForm.endYear = ''
	switch (state.keyType) {
		case '1':
			state.queryForm.researchName = state.keyword
			break
		case '2':
			state.queryForm.projectNumber = state.keyword
			break
		case '3':
			state.queryForm.principal = state.keyword
			break
		case '4':
			state.queryForm.contacts = state.keyword
			break
		case '5':
			state.queryForm.responsibleEnt = state.keyword
			break
	}
	if (state.yearrange !== null) {
		if (state.yearrange.length > 0) {
			state.queryForm.startYear = state.yearrange[0]
			state.queryForm.endYear = state.yearrange[1]
		}
	}
	state.dataListLoading = true
	getList({
		pageIndex: state.pageNum,
		pageSize: state.pageSize,
		...state.queryForm
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const search = () => {
	state.pageNum = 1
	getDataList()
}

const reset = () => {
	state.yearrange = []
	state.queryForm.researchName = ''
	state.queryForm.projectNumber = ''
	state.queryForm.principal = ''
	state.queryForm.contacts = ''
	state.queryForm.processStage = ''
	state.queryForm.projectManager = ''
	state.queryForm.scheduleStatus = ''
	state.queryForm.processStatus = ''
	state.queryForm.approvalReview = ''
	state.queryForm.startYear = ''
	state.queryForm.endYear = ''
	state.queryForm.responsibleEnt = ''
	state.queryForm.pendingStatus = ''
	state.keyword = ''
	state.keyType = ''
	state.pageNum = 1
	getDataList()
}

const handleAddNew = () => {
	showAddDialog.value = true
	editId.value = ''
	isAudit.value = true
}

const handleEdit = (row: any) => {
	editId.value = row.id
	showAddDialog.value = true
}

const handleView = (row: any) => {
	isView.value = true
	editId.value = row.id
	showAddDialog.value = true
}

const selectionChangeHandle = () => {}
const sizeChangeHandle = (e: number) => {
	state.pageSize = e
	state.pageNum = 1
	getDataList()
}
const currentChangeHandle = (e: number) => {
	state.pageNum = e
	getDataList()
}

const addSuccess = (e: any) => {
	editId.value = ''
	showAddDialog.value = false
	reset()
}

const addSuccess1 = (e: any) => {
	editId.value = ''
	showFileDialog.value = false
	reset()
}

const handleFile = (row: any) => {
	showFileDialog.value = true
	editId.value = row.id
}

const handleViewResult = (row: any) => {
	showFileDialog.value = true
	editId.value = row.id
	isView.value = true
}

const handleReturnBack = (item: any) => {
	ElMessageBox.confirm(`是否退回该项目？`, '温馨提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			returnBack({
				id: item.id
			}).then(() => {
				ElMessage.success('操作成功')
				getDataList()
			})
		})
		.catch(() => {})
}

const handleCancleRelease = (item: any) => {
	ElMessageBox.confirm(`是否取消该项目的成果发布？`, '温馨提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			returnBack({
				id: item.id
			}).then(() => {
				ElMessage.success('操作成功')
				getDataList()
			})
		})
		.catch(() => {})
}

const select = () => {
	const selectedRows = multipleTableRef.value.getSelectionRows()
	if (selectedRows.length == 0) {
		return ElMessage.error('请至少选择一个项目')
	}
	selectList.value = selectedRows
}

const setUser = () => {
	select()
	if (selectList.value.length > 0) {
		if (selectList.value.length == 1) {
			userForm.projectManagerA = selectList.value[0].projectManagerA
			userForm.projectManagerB = selectList.value[0].projectManagerB
		}
		showSetUser.value = true
	}
}

const submitSetUserForm = async (formRef: FormInstance) => {
	if (!formRef) {
		return
	}
	await formRef.validate((valid, fields) => {
		if (valid) {
			userForm.ids = selectList.value.map(i => i.id)
			assignAccountApi(userForm).then(res => {
				ElMessage({
					type: 'success',
					message: '操作成功'
				})
				showSetUser.value = false
				getDataList()
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}

const setTime = () => {
	select()
	if (selectList.value.length > 0) {
		showSetTime.value = true
		timeForm.openingDeadline = selectList.value[0].openingDeadline
		timeForm.midtermDeadline = selectList.value[0].midtermDeadline
		timeForm.completionDeadline = selectList.value[0].completionDeadline
	}
}

const submitSetTimeForm = async (formRef: FormInstance) => {
	if (!formRef) {
		return
	}
	await formRef.validate((valid, fields) => {
		if (valid) {
			let form = {
				ids: [],
				openingDeadline: '',
				midtermDeadline: '',
				completionDeadline: ''
			}
			form.ids = selectList.value.map(i => i.id)
			form.openingDeadline = timeForm.openingDeadline + ' 00:00:00'
			form.midtermDeadline = timeForm.midtermDeadline + ' 00:00:00'
			form.completionDeadline = timeForm.completionDeadline + ' 00:00:00'

			updateTimeSetting(form).then(res => {
				ElMessage({
					type: 'success',
					message: '操作成功'
				})
				showSetTime.value = false
				getDataList()
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}

const exportHandle = () => {
	try {
		// const selectedRows = multipleTableRef.value.getSelectionRows()
		// if (selectedRows.length == 0) {
		// 	throw new Error('请选择一个项目')
		// }
		// const ids = selectedRows.map(item => {
		// 	return item.id
		// })
		const param = {
			// ids: ids,
			...state.queryForm
		}
		axios({
			method: 'post',
			url: window.location.protocol + '//' + window.location.host + '/JGBStandardWebApi' + '/api/scientificResearchProcess/exportProcess',
			headers: {
				'Content-Type': 'application/json;charset=UTF-8',
				Authorization: userStore.token
			},
			data: param,
			responseType: 'blob'
		})
			.then(response => {
				ElMessage.success('操作成功，文件已开始下载')
				const blob = new Blob([response.data], {
					type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
				})
				const url = window.URL.createObjectURL(blob)
				const a = document.createElement('a')
				a.href = url
				a.download = '前瞻性项目过程导出文件.xls'
				a.click()
				window.URL.revokeObjectURL(url)
			})
			.catch(error => {
				console.error('导出失败:', error)
			})
	} catch (error) {
		console.error('提交处理失败:', error.message)
		ElMessage.error(error.message)
	}
}

onMounted(() => {
	getDataList()
	getUserList()
})
</script>
<style lang="scss" scoped>
.anniu .el-form-item {
	margin-right: 10px !important;
}

.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}

.title {
	font-size: 20px;
	text-align: center;
}

.subtitle {
	font-size: 16px;
	margin: 30px 0 10px;
}

.form {
	display: flex;
	flex-wrap: wrap;

	.item {
		display: flex;
		align-items: center;
		min-width: 33.33%;

		.label {
			font-size: 14px;
			height: 30px;
			line-height: 30px;
		}

		.value {
			padding: 2px 20px 2px 5px;
			border-bottom: solid 1px #333;
			font-size: 14px;
			margin-right: 50px;
			flex: 1;
			height: 30px;
			line-height: 30px;
		}
	}
}

.form2 {
	margin-top: 20px;

	.label {
		line-height: 20px;
	}

	.value {
		border-bottom: solid 1px #333;
		font-size: 14px;
		line-height: 28px;
	}
}
</style>
